<template>
	<view class="container">
		<view class="avatar">
			<image src="/static/images/avatar.png"></image>
		</view>

		<view class="form">
			<uv-form labelPosition="left" labelWidth="80" labelAlign="right" :model="business" :rules="rules" ref="FormRef">
				<!-- 表单元素 -->
				<uv-form-item label="手机号码" prop="mobile" borderBottom>
					<uv-input v-model="business.mobile" border="none" placeholder="请输入手机号码"></uv-input>
				</uv-form-item>

				<uv-form-item label="密码" prop="password" borderBottom>
					<uv-input type="password" v-model="business.password" border="none" placeholder="请输入密码"></uv-input>
				</uv-form-item>

				<view style="margin-top:25px">
					<uv-button type="warning" @click="OnSubmit">登录注册</uv-button>
				</view>

				<view class="btn" @click="ToHome">返回首页</view>
			</uv-form>
		</view>
	</view>

    <!-- 消息提示 -->
	<uv-toast ref="NoticeRef"></uv-toast>
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 表单绑定数据
const business = reactive({
    mobile:'',
    password:''
});

// 表单对象实例
const FormRef = ref(null);
// 信息提示组件实例
const NoticeRef = ref(null);

// 表单验证规则
const rules = ref({
    mobile: [
        {
            type: 'string',// 数据类型
            required: true, // 要求必填
            message: '手机号码必填',// 错误提示信息
            trigger: ['change', 'blur'], //触发的事件动作
        },
        {
            // 自定义验证函数
            validator: (rule, value, callback) => uni.$uv.test.mobile(value),
            message: '手机号码格式有误，请重新填写',
            trigger: ['change', 'blur'], //触发的事件动作
        },
    ],
    password: [
        {
            type: 'string',
            required: true,
            message: '请填写密码',
            trigger: ['blur', 'change']
        }
    ]
});

// 返回首页
const ToHome = () =>
{
    uni.$uv.route({
        type:'switchTab',
        url:'/pages/validate/validate'
    });
}

// 表单提交
const OnSubmit = () =>
{
    // 当用户点击提交按钮时触发表单校验
    FormRef.value.validate().then(async () =>
    {
        const result = await uni.$uv.http.post('/business/web',business);

        if(result.code === 1)
        {
            NoticeRef.value.show({
                type:'success',
                message:result.msg,
                complete:() =>
                {
                    uni.navigateBack({
                        delta: 1,
                        complete:() =>
                        {
                            // 存储登录信息
                            uni.setStorageSync('business',result.data);

                            // 更新全局属性数据
                            proxy.$business.value = result.data;
                        }
                    });
                }
            });
        }else{
            NoticeRef.value.show({
                type:'error',
                message:result.msg
            });
        }
        
    }).catch((err) => {});
}
</script>

<style>
page {
    background-color: #f8fafe;
}

.container .avatar {
    text-align: center;
    background-color: #fff;
}

.avatar image {
    width: 120px;
    height: 120px;
    margin: 50px 0;
    border-radius: 50%;
}

.form {
    margin: 0 50rpx;
    box-sizing: border-box;
}

.btn {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.u-icon {
    margin-left: 10px;
}
</style>